<template>
	<div class="el-scrollbar__wrap" style="background-color: #fff;">
		<div class="invoicMain" style="margin-top:20px;">
			<!-- head start -->
			<div class="invoiceHeader">
				<div class="invoiceHeader-left">
					<ul class="headerLeft">
						<li>
							<img v-if="checkState==1" src="../../../../assets/imgs/zhaohang/sucess.png" alt="">
							<img v-if="checkState==1&&checkState==''" src="../../../../assets/imgs/zhaohang/over.png" alt="">
						</li>
						<li>
							<label>机器编号：</label><span>{{invoiceVerifications.machineCode}}</span>
						</li>
					</ul>
				</div>
				<div class="headerMiddle">
					<h1>{{invoiceTypes}}</h1>
					<div class="line"></div>
					<div class="line"></div>
					<el-button style="margin-top:10px ;" type="primary" size="small" @click="invoiceVerification=true">发票验证</el-button>
				</div>
				<ul class="headerRight">
					<li>
					<label> 发票代码： </label><span>{{invoiceVerifications.invoiceCode}}</span>
					</li>
					<li>
						<label> 发票号码： </label><span>{{invoiceVerifications.invoiceNo}}</span>
					</li>
					<li>
						<label> 开票日期： </label><span>{{invoiceVerifications.invoiceDate}}</span>
					</li>
					<li>
						<label><span style="letter-spacing:7px;">校验</span>码： </label><span>{{invoiceVerifications.checkCode}}</span>
					</li>
				</ul>
			</div>
			<!-- head end -->
			<!-- invoice body start -->
		 <div class="invoiceBody">
				<div class="userInfo">
					<div class="buy">购买方</div>
					<ul>
						<li>
							<div style="display: flex;">
								<div class="label"><span style="letter-spacing:56px;">名</span>称：</div><div><span>{{invoiceVerifications.buyerName}}</span></div>
							</div>
						</li>
						<li>
							<div style="display: flex;">
								<div class="label">纳税人识别号：</div><div><span>{{invoiceVerifications.buyerTaxNo}}</span></div>
							</div>
						</li>
						<li>
							<div style="display: flex;">
								<div class="label">地 址 、电 话：</div><div style="flex: 1;"><span>{{invoiceVerifications.buyerAddTel}}</span></div>
							</div>
						</li>
						<li>
							<div style="display: flex;">
								<div class="label">开户行及账号：</div><div><span>{{invoiceVerifications.buyerBankNo}}</span></div>
							</div>
						</li>
					</ul>
					<div class="password">密码区</div>
					<div class="pwdInfo1"></div>
				</div>
				<div>
					<table class="GoodsTable" cellpadding="0" cellspacing="0" style="min-height: 250px;">
						<tr style="color: #9c5223;">
							<td style="width: 24%">项目名称</td>
							<td style="width: 10%">规格型号</td>
							<td style="width: 7%">单位</td>
							<td style="width: 10%">数量</td>
							<td style="width: 10%">单价</td>
							<td style="width: 16%">金额</td>
							<td style="width: 7%">税率</td>
							<td style="width: 16%; border-right: none;">税额</td>
						</tr>
						<tr class="invoice-list" v-for="(item,index) in invoiceVerifications.itemList" :key="index">
							<td>{{item.waresName}}</td>
							<td>{{item.standardType}}</td>
							<td>{{item.calcUnit}}</td>
							<td>{{item.quantity}}</td>
							<td>{{item.noTaxPrice}}</td>
							<td>{{item.amount}}</td>
							<td>{{item.taxRate*100}}%</td>
							<td>{{item.taxAmount}}</td>
						</tr>
						<tr class="total" >
							<td style="color: #9c5223;">合计</td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td style="text-align: center;">￥{{total1}}</td>
							<td></td>
							<td style="text-align: center;">￥{{total2}}</td>
						</tr>
						<tr class="GoodsTotal">
							<td style="padding-left: 10px; color: #9c5223;">价税合计（大写）</td>
							<td colspan="7">
								<div style="width: 100%;display:flex">
									<div type="text" style="width: 60%;margin-left: 10px;"><i class="el-icon-circle-close" style="font-size: 20px;"></i>{{borrowmoneybig}}</div>

									<div type="text" style="width: 30%"> <span style="color: #9c5223;">（小写）</span> ￥{{invoiceVerifications.amount}}</div>
								</div>

							</td>
						</tr>
					</table>
					<div class="userInfo">
						<div class="buy">销售方</div>
						<ul>
							<li>
								<div style="display: flex;">
									<div class="label"><span style="letter-spacing:56px;">名</span>称：</div><div><span>{{invoiceVerifications.sellerName}}</span></div>
								</div>
							</li>
							<li>
								<div style="display: flex;">
									<div class="label">纳税人识别号：</div><div><span>{{invoiceVerifications.sellerTaxNo}}</span></div>
								</div>
							</li>
							<li>
								<div style="display: flex;">
									<div class="label">地 址 、电 话：</div><div style="flex: 1;"><span>{{invoiceVerifications.sellerAddTel}}</span></div>
								</div>
							</li>
							<li>
								<div style="display: flex;">
									<div class="label">开户行及账号：</div><div><span>{{invoiceVerifications.sellerBankNo}}</span></div>
								</div>
							</li>
						</ul>
						<div class="password">备注</div>
						<div class="pwdInfo">{{invoiceVerifications.comments}}</div>
					</div>
				</div>

			</div>
			<!-- invoice body start -->
			<ul class="invoicetFooter">
				<li>
					<label>收款人：{{invoiceVerifications.gatheringPerson}}</label>
				</li>
				<li>
					<label>复核：{{invoiceVerifications.reCheckPerson}}</label>
				</li>
				<li>
					<label>开票人：{{invoiceVerifications.makeInvoicePerson}}</label>
				</li>
				<li>
				<label>销售方：（章）</label>
				</li>
			</ul>
		</div>
		<el-dialog title="发票验证" :visible.sync="invoiceVerification" width="750px">
			<el-form :model="invoiceAuthenticityForm" size="small" label-width="140px" ref="invoiceAuthenticityForms" v-loading="invoiceAuthenticityLoading">
				<el-row>
					<el-col :span="12">
						<el-form-item label="发票类型" prop="type"
							:rules="[ {required: true, message:'发票类型不能为空', trigger:'blur'} ]">
							<el-select v-model="invoiceAuthenticityForm.type" placeholder="请选择" style="width: 100%;">
								<el-option v-for="item in invoiceType" :key="item.value"
									:label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="开票日期" prop="invoiceDate"
							:rules="[ {required: true, message:'开票日期不能为空', trigger:'blur'} ]">
							<el-date-picker prefix-icon="el-icon-folder" v-model="invoiceAuthenticityForm.invoiceDate"
								type="date" style="width: 100%;" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
								placeholder="请选择">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票代码" prop="invoiceCode"
							:rules="[ {required: true, message:'发票代码不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.invoiceCode" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="发票号码" prop="invoiceNo"
							:rules="[ {required: true, message:'发票号码不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.invoiceNo" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='0'">
						<el-form-item label="不含税金额" prop="totalAmount">
							<el-input v-model="invoiceAuthenticityForm.totalAmount" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='1'">
						<el-form-item label="不含税金额" prop="totalAmount"
							:rules="[ {required: true, message:'不含税金额不能为空', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.totalAmount" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='0'">
						<el-form-item label="校验码" prop="checkCode"
							:rules="[ {required: true, message:'校验码不能为空(非区块链发票填后6位，区块链电子发票填后5位)', trigger:'blur'} ]">
							<el-input v-model="invoiceAuthenticityForm.checkCode" placeholder="非区块链发票填后6位，区块链电子发票填后5位"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="invoiceAuthenticityForm.type=='1'">
						<el-form-item label="校验码" prop="checkCode">
							<el-input v-model="invoiceAuthenticityForm.checkCode" placeholder="非区块链发票填后6位 区块链电子发票填后5位"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="子公司税号" prop="subsidiaryTaxNo">
							<el-input v-model="invoiceAuthenticityForm.subsidiaryTaxNo" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeInvoiceAuthenticityOne">重置</el-button>
				<el-button size="small" type="primary" @click="invoiceAuthenticityOne">验证</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import tableStyles from '../../../../utils/mixins.js';
	export default {
		mixins: [tableStyles],
		data() {
			return {
				// 单张发表查验真伪
				invoiceVerification: false, //参数弹出框
				verifications:"",
				invoiceType: [{
					label: "普票",
					value: "0"
				}, {
					label: "专票",
					value: "1"
				}],
				invoiceAuthenticityForm: {
					type: "", //发票类型 0：普票 1：专票 必填
					invoiceCode: "", //发票代码 必填 
					invoiceNo: "", //发票号码 必填
					invoiceDate: "", //开票日期 必填
					financingFlag: "N", //融资标识 必填
					totalAmount: "", //不含税金额  专票必填
					checkCode: "", //校验码  普票必填
					subsidiaryTaxNo: "", // 子公司税号
				},
				invoiceAuthenticityLoading: '',
				invoiceVerifications:"",
				borrowmoneybig:"",
				invoiceTypes:"增值税发票",
				checkState:"",
				total1:0,
				total2:0,
			}
		},
		methods: {
			invoiceAuthenticityOne() {
				this.$refs['invoiceAuthenticityForms'].validate((valid) => {
					if (valid) {
						this.invoiceAuthenticityLoading = true;
						this.$http({
							url: '/sys/user/invoice/CHKCHK01',
							method: 'post',
							params: {
								company: this.$store.state.user.companyId,
								...this.invoiceAuthenticityForm
							}
						}).then(({
							data
						}) => {
							if (data) {
								this.invoiceAuthenticityLoading = false;
								if (data.success) {
									this.closeInvoiceAuthenticityOne();
									this.$message.success(data.msg);
									this.invoiceVerifications=data.result;
									this.invoiceTypes=this.invoiceVerifications.invoiceType;
									this.checkState=this.invoiceVerifications.checkState;
									this.borrowmoneySwitch();
									for(var i=0;i<this.invoiceVerifications.itemList.length;i++){
										this.total1+=parseFloat(this.invoiceVerifications.itemList[i].amount);
										this.total2+=parseFloat(this.invoiceVerifications.itemList[i].taxAmount);
									}
								}
							}
						})
					}
				})
			},
			closeInvoiceAuthenticityOne() {
				this.invoiceVerification = false;
				this.$refs.invoiceAuthenticityForms.resetFields();
			},
			borrowmoneySwitch() {
				console.log("222",this.invoiceVerifications.amountTax);
				var money = this.invoiceVerifications.amountTax;
				var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
				//基本单位
				var cnIntRadice = new Array('', '拾', '佰', '仟');
				//对应整数部分扩展单位
				var cnIntUnits = new Array('', '万', '亿', '兆');
				//对应小数部分单位
				var cnDecUnits = new Array('角', '分', '毫', '厘');
				//整数金额时后面跟的字符
				var cnInteger = '整';
				//整型完以后的单位
				var cnIntLast = '元';
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				//金额整数部分
				var integerNum;
				//金额小数部分
				var decimalNum;
				//输出的中文金额字符串
				var chineseStr = '';
				//分离金额后用的数组，预定义
				var parts;
				if (money == '') {
					this.inputForm.borrowmoneybig = chineseStr
				}
				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return '';
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
				}
				//转换为字符串
				money = money.toString();
				if (money.indexOf('.') == -1) {
					integerNum = money;
					decimalNum = '';
				} else {
					parts = money.split('.');
					integerNum = parts[0];
					decimalNum = parts[1].substr(0, 4);
				}
				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == '0') {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != '') {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != '0') {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == '') {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == '' && money != 0) {
					chineseStr += cnInteger;
				}
				this.borrowmoneybig = chineseStr
			},
		}
	}
</script>


<style>
    ul,
    ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

   .label {
        color: #9c5223;
		width: 100px;
    }

    .invoicMain {
        width: 1100px;
        margin: 0 auto;
        font-size: 14px;
        color: #000;
        padding: 20px;
    }

    .invoiceHeader {
        height: 110px;
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
    }

    .headerLeft li:nth-child(1) {
        /* text-indent: 1em; */
    }

    .headerLeft li img {
        width: 80px;
        height: 80px;

    }

    .headerMiddle h1 {
		text-align: center;
        font-size: 30px;
        color: #9c5223;
        font-family: 'kaiti';
        margin: 5px 0px;
    }

    .line {
		margin-bottom: 2px;
        border-bottom: #9c5223 2px solid;
    }
    .headerRight li {
        line-height: 24px;
    }

    .invoiceBody {
        border: 1px solid #9c5223;
    }

    .userInfo {
        width: 100%;
        display: flex;
        align-items: center;
        height: 142px;
        border-bottom: 1px solid #9c5223;
    }

    .userInfo ul {
        width: 50%;
        margin: 0 5px;
        padding: 0;

    }

    .userInfo ul li {
        line-height: 24px;
    }

    .buy {
		width: 35px;
        border-right: 1px solid #9c5223;
        padding: 0 10px;
        text-align: center;
        height: 142px;
        display: flex;
        align-items: center;
        color: #9c5223;
    }

    .password {
        width: 35px;
        padding: 0 10px;
        border-right: 1px solid #9c5223;
        border-left: 1px solid #9c5223;
        text-align: center;
        height: 142px;
        display: flex;
        align-items: center;
        color: #9c5223;
    }

    .pwdInfo {
        flex: 1;
        padding-left: 5px;
    }
	.pwdInfo1 {
		background-image: url(../../../../assets/imgs/zhaohang/pwd.png);
		height: 100%;
		background-size: 100% 100%;
        flex: 1;
        padding-left: 5px;
    }
    .goodsInfo {
        height: 210px;
        margin: 0;
        padding: 0;

    }

    .goodsInfo li {
        display: flex;
        color: #9c5223;
        text-align: center;
    }

    .name {
        width: 260px;
        border-right: 1px solid #9c5223;
    }

    .spec {
        width: 140px;
        border-right: 1px solid #9c5223;
    }

    .qty {
        width: 108px;
        border-right: 1px solid #9c5223;
    }

    .unit,
    .taxRate {
        width: 65px;
        border-right: 1px solid #9c5223;
    }

    .qty,
    .price {
        width: 160px;
        border-right: 1px solid #9c5223;
    }

    .money {
        flex: 1;
        border-right: 1px solid #9c5223;
    }

    .taxAmount {
        flex: 1;
    }

    .GoodsTable {
        height: 100px;
        width: 100%;
        border-collapse: collapse;
    }

    .GoodsTable .invoice-list {
		color: #000000;
		height: 25px;
    }
	.invoice-list td{
		text-align: center;
	}
    .GoodsTable td {
        border-right: 1px solid #9c5223;	
    }

    .GoodsTable tr:nth-child(1),
    .GoodsTable tr:nth-last-child(2) {
        height: 24px;
    }

    .GoodsTable tr:nth-last-child(1) {
        height: 20px;
    }

    .GoodsTable tr:nth-child(1) td {
        text-align: center;
    }

    .GoodsTotal {
        border-top: 1px solid #9c5223;
        border-bottom: 1px solid #9c5223;
    }

    .total td:nth-child(1) {
        text-align: center;
    }

    .invoicetFooter {
        margin: 5px 0 0 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    .invoicetFooter li {
        width: 25%;
    }
    .invoiceHeader-left{
        width: 26%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .headerRight{
		width: 26%;
        /* margin-left: 28px; */
    }
    .headerMiddle{
		flex: 1;
		padding: 0 20px;
		/* width: 42%; */
		text-align: center;
        /* margin-right: 15px; */
    }
</style>

